<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,
    width=device-width,initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>郑州大学自助评教系统</title>
    <style>
        body {
            width: 100%;
            margin: 0 auto;
        }

        input {
            width: 300px;
            height: 30px;
        }

        button {
            width: 100px;
            height: 30px;
        }

        .video {
            width: 600px;
            height: 800px;
            float: left;
            margin-left: 100px
        }

        .form {
            float: left;
            width: 400px;
            margin: 0 auto;
            display: block
        }

        @media screen and (max-width: 700px) {
            body {
                width: 100%;
                overflow-x: hidden
            }

            .video {
                width: 100%;
                height: auto;
                float: left;
                margin: 0 auto;
                margin-top: 20px;
            }

            .form {
                float: left;
                width: 95%;
                margin: 0 auto;
                display: block
            }
        }
    </style>

</head>

<body style="margin: 0 auto;">
    <div style="padding: 10px;max-width: 1200px;margin: 0 auto;">
        {% block content %}

        <h2><img src="http://www15.zzu.edu.cn/images/logo.png" alt=""><br>郑州大学自助评教系统</h2>


        <form class="form" method="post" id="regloginform">

            <span style="color:#868686;font-weight: 700;">注：默认 10分，祝老师身体健康，诸事顺利
                <p>
                    <span style="float: right">#视频无加速</span>
                </p></span>

            {% if (msg | length) > 0 %}
            <script>
                completeLoading()
            </script>
            <br> <b style="color: red;">{{msg}}</b>
            {% endif %}
            <div class="form-item">
                <input class="input-txt" id="username" aria-label="学号" aria-required="true" autocapitalize="off"
                    autocorrect="off" maxlength="30" name="username" placeholder="学号" value="" type="text"
                    data-reactid=".0.1.0.1.0.1.0.5.0">
            </div>
            <div class="form-item">
                <input class="input-txt" id="password" aria-describedby="" aria-label="密码" aria-required="true"
                    autocapitalize="off" autocorrect="off" name="password" placeholder="密码" type="password" value=""
                    data-reactid=".0.1.0.1.0.1.0.6.0">
            </div>
            <div class="btn-wrapper">
                <button class="btn-primary" onclick="return check()">开始
                </button>
            </div>
        </form>
        <video class="video" id="video" controls="controls" autoplay="autoplay" loop="loop">
            <source style="width:100%" src="http://zzuisa.cn/demo.mp4" type="video/mp4" />
        </video>
        {% endblock%}
    </div>
</body>
<script>
    var _LoadingHtml = `
                <div id="loadingDiv" style="display: none; ">
                <div id="over" style=" position: absolute;top: 0;left: 0; width: 100%;height: 100%; background:rgba(255,255,255,1);filter:blur(5px);z-index: 1000;">
                </div>
                <div id="layout" style="position: fixed;top: 20%; height: 35%;  z-index: 1001;text-align:center;margin:0 auto;">
                <img src="http://zzuisa.cn/dict/timg.gif" /><h2>Loading...</h2></div></div>'`;
    document.write(_LoadingHtml);
    function completeLoading() {
        document.getElementById("loadingDiv").style.display = "none";
        document.getElementById("video").style.display = "block";
        document.body.style.position = 'static';

    }
    function showLoading() {
        document.getElementById("loadingDiv").style.display = "block";
        document.getElementById("video").style.display = "none";
        document.body.style.position = 'fixed';
        document.body.style.overflow = 'hidden';

    }
    function check() {
        let username = document.getElementById('username').value;
        let password = document.getElementById('password').value;
        console.log(username, password)
        if (username == '' || password == '') {
            alert('学号或密码不能为空！');
            return false
        }
        form = document.getElementById('regloginform');
        form.action = '/evaluate/start/';
        form.submit()
        showLoading();
    }
</script>

</html>